<template>
    <el-container class="layout-container" :style="{height: clientHeight + 'px'}">
        <!--左侧菜单栏-->
        <el-aside :class ="isCollapse ? 'aside-collapsed' : 'aside-expanded'">
            <!--Brand & LOGO-->
            <el-header style="padding:10px">
                <div class="toolbar">
                    <!--展开-->
                    <div v-if="!isCollapse" class="logo-bar">
                        <img src="https://assets.honqun.cn/logo/logo-icon-white.png"
                             class="logo">
                        <span class="title">TinyCMS 内容管理</span>
                    </div>
                    <!--折叠-->
                    <div v-else class="logo-bar">
                        <img src="https://assets.honqun.cn/logo/logo-icon-white.png"
                             class="logo">
                    </div>
                </div>
            </el-header>
            <!--左侧菜单-->
            <el-menu
                :default-active="defaultActive"
                :collapse="isCollapse"
                :collapseTransition="true"
            >
                <!--子菜单-->
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><LocationFilled /></el-icon>
                        <span>内容管理</span>
                    </template>
                    <el-menu-item index="1-2" @click="menuClick('/cms/CmsColumn')">
                        <el-icon><FolderOpened /></el-icon>
                        <span>栏目</span>
                    </el-menu-item>
                    <el-menu-item index="1-3" @click="menuClick('/cms/CmsTemplate')">
                        <el-icon><Grid /></el-icon>
                        <span>模板</span>
                    </el-menu-item>
                    <el-menu-item index="1-4" @click="menuClick('/cms/CmsArticle')">
                        <el-icon><Document /></el-icon>
                        <span>内容</span>
                    </el-menu-item>
                </el-sub-menu>
                <!--子菜单-->
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><Setting /></el-icon>
                        <span>系统设置</span>
                    </template>
                    <el-menu-item index="2-1" @click="menuClick('/admin/RoleView')">
                        <el-icon><DocumentChecked /></el-icon>
                        <span>角色</span>
                    </el-menu-item>
                    <el-menu-item index="2-2" @click="menuClick('/admin/UserView')">
                        <el-icon><UserFilled /></el-icon>
                        <span>用户</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>

        <el-container>
            <!--顶部导航栏-->
            <el-header>
                <!--展开/折叠按钮-->
                <div class="toolbar">
                    <el-icon color="#ffffff" :size="20" v-if="!isCollapse" @click="toggleCollapse">
                        <fold/>
                    </el-icon>
                    <el-icon color="#ffffff" :size="20" v-if="isCollapse" @click="toggleCollapse">
                        <expand/>
                    </el-icon>
                </div>
                <!--当前登录用户-->
                <div class="toolbar" style="float: right">
                    <el-dropdown>
                        <el-icon :size="20" :color="'#ffffff'">
                            <Avatar />
                        </el-icon>

                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>
                                    <el-icon><Key /></el-icon>
                                    <span>修改密码</span>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-icon><SwitchButton /></el-icon>
                                    <span>退出登录</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span style="font-size: var(--el-font-size-base)">系统管理员</span>
                </div>
            </el-header>

            <!--操作区-->
            <el-main style="overflow: hidden">

                <el-card  shadow="never" :body-style="viewStyle">
                    <template #header>
                        <!--面包屑-->
                        <el-breadcrumb>
                            <el-breadcrumb-item v-for="(item, i) in breadcrumb">{{ item }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </template>
                    <router-view/>
                </el-card>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            defaultActive: '', //缺省激活的菜单
            isCollapse: true,
            clientHeight: document.documentElement['clientHeight'],
            viewStyle: {}, //主视口样式
            breadcrumb: [] //面包屑
        }
    },

    mounted() {
        this.initPath() //初始化面包屑
        this.setViewStyle()
    },

    methods: {
        /**
         * 点击菜单，导航到对应的组件
         */
        menuClick (path) {
            // 点击菜单的时候，修改面包屑
            this.setBreadcrumb(path);
            this.$router.push({ path: path })//路由导航
        },

        /**
         * 根据菜单路径，设置面包屑导航
         */
        setBreadcrumb(path) {
            this.$router.getRoutes().forEach(route => {
                if (route.path === path) {
                    this.breadcrumb = route.meta.breadcrumb
                    this.defaultActive = route.meta.index //根据path，激活当前的菜单
                }
            })
        },

        /**
         * 进入主界面的时候，初始化面包屑
         */
        initPath() {
            if (location.hash) {
                let path = location.hash.replaceAll('#', '')
                this.setBreadcrumb(path)
            }
        },

        /**
         * 计算主视口样式（高度）
         */
        setViewStyle() {
            this.clientHeight = document.documentElement['clientHeight'];
            let height = this.clientHeight - 150;
            this.viewStyle = {
                minHeight: height + 'px'
            }
            console.log(this.viewStyle)
            window.$mainCntHeight = height
        },

        /**
         * 切换菜单展开或者收回
         */
        toggleCollapse () {
            this.isCollapse = !this.isCollapse
        }
    }
}
</script>

<style scoped>
.layout-container .el-header {
    position: relative;
    background-color: var(--el-color-primary);
    color: white;
}
.layout-container .el-aside {
    color: var(--el-text-color-primary);
    background: white;
}
.layout-container .el-menu {
    border-right: none;
}
.layout-container .el-main {
    padding: 0;
}
.layout-container .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}

.el-aside {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 260px;
    box-shadow: 0 8px 20px -6px rgba(0,0,0,.3);
    transition: width 0.5s;
}

.aside-expanded {
    width: 260px;
}

.aside-collapsed {
    width: 60px;
    overflow: hidden;
}

body .logo-bar {
    color:#fff;
    text-decoration: none;
    font-weight:700;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
}

body .logo-bar .title {
    font-weight: 700;
    white-space: nowrap;
}

body .logo-bar img.logo {
    width: 38px;
    height: 38px
}
</style>

